<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改登录密码</title>
    <meta name="keywords" content="修改登录密码"/>
    <meta name="description" content="修改登录密码"/>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/publicOfuser.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/combtn.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/weui.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/accsetting.css}">
    <script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
    <script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
</head>
<body>
<div class="main bgfff">
    <div class="main_con c323232 withdraw">
        <div class="userinfo title">
            <span>修改登录密码</span>
        </div>
        <div class="mt20">
            <div class="clearfix">
                <div class="overflow pr15 pl15">
                    <h3 class="c323232 ft18 bold">绑定的手机号</h3>
                    <p class="c646464 ft16 mt20" th:if="${phone!=null}" th:text="${'请输入'+phone+'收到的验证码'}"></p>
                    <p class="c646464 ft16 mt20" th:if="${phone==null}" th:text="${'编号绑定的手机号有误!'}"></p>
                    <input class="ft18 c969696  w100 phone" name="phone" th:value="${phone}" placeholder="请输入手机号" type="hidden">
                </div>
            </div>
            <input class="update-userNo"  type="hidden" name="userNo" th:if="${userNo!=null}" th:value="${userNo}" />
            <p>
                <!--<input class="login-phone" name="phone" value="" placeholder="请输入用户编号绑定的手机号码！">-->
                <!--<span class="ft15">153****1315</span>-->
            </p>
            <!--<p class="mt10">-->
                <!--<span class="ft14 c969696 phone-msg" style="color: red">(用户号绑定的手机号)</span>-->
            <!--</p>-->
        </div>
        <div class="mr15 ml15 mt20">
            <ul class="login-form">
                <li>
                    <div class="clearfix mt15 input_border_bottom_normal">
                        <a href="#" class="pinkbtn button pink bigrounded fr  code" id="code">获取验证码</a>
                        <div class="overflow pr15">
                            <input class="ft16 c646464  w100 codeval" name="code" value="" placeholder="请输入验证码" type="text">
                        </div>
                    </div>
                    <p class="code-msg"><span></span></p>
                </li>
                <li>
                    <div class="clearfix mt15 input_border_bottom_normal">
                        <!--<img class="fl" th:src="@{/shoppingApi/images/login_by_account_normal.png}" style="width: 16px;height: 22px;">-->
                        <div class="overflow pr15">
                            <input class="ft16 c646464  w100 new-pwd" name="newpwd" value="" placeholder="请设置您的新密码" type="text">
                        </div>
                    </div>
                </li>

                <li>
                    <p class="mt15 pl15"><span class="ft14 c969696 pwd-msg">提示：登录密码只能由6-20位数字和字母组成</span></p>
                </li>

                <li>
                    <div><a class="submit mt40 bigrounded button red  submitSetPwd ">确定</a></div>
                </li>
            </ul>
        </div>

    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        if(navigator.userAgent.indexOf("Html5Plus") > -1){
            $('.userinfo.title').hide();
        }
    });
    // var flag = false;
    // $('.phone').on('blur',function () {
    //     flag = validatePhone();
    // });

    // 验证手机是否存在，并发送验证码
    $(document).on('click','.code',function () {
        // if (flag) {
            var phone = $('.phone').val();
        var pattern = /^1[3456789]\d{9}$/;
        if (!pattern.test(phone)) {
            return;
        } else {
            $.ajax({
                url: '/wap/selectPhoneByPhone?phone=' + phone,
                success: function (result) {
                    if (result.phone) {
                        // setCode();
                        $.ajax({
                            async:false,
                            dataType: 'json',
                            contentType: 'application/json',
                            url:'/wap/sendCodeByPhone?phone='+phone+"&type=4",
                            success:function (result) {
                                var  data=$.parseJSON(result.json);
                                // alert(data.message);
                                if(data.stat==100){
                                    getCodeTimer();
                                }else {
                                    $('.phone-msg').html("发送错误!");
                                }
                            }
                        });
                        //getCodeTimer();
                        // $('.phone-msg').html('手机号已存在');
                    } else {
                        $('.phone-msg').html('手机号码不存在');
                    }
                }
            })
        }
        // }
    })

    // 验证手机号格式
    function validatePhone () {
        var phone=$('.phone').val();
        var pattern = /^1[34578]\d{9}$/;
        if (!pattern.test(phone)) {
            $('.phone-msg').html("请输入正确的手机号");
            return false;
        } else {
            $('.phone-msg').html("手机格式正确");
            return true;
        }
    }

    /*设置验证码*/
    function  setCode() {
        $('.codeval').val('6608');
    }

 //检测验证码
 //    function testCode(code) {
 //        if (code != "") {
 //            $.ajax({
 //                url: "/API/user/PwdCode?code=" + code,
 //                success: function (result) {
 //                    console.log(result.msgCode);
 //                    if (result.msgCode == "000000") {
 //
 //                    }else{
 //                        $('.code-msg span').html("验证码不正确！");
 //                    }
 //                }
 //            })
 //
 //        } else {
 //            $('.code-msg span').html("验证码不正确！");
 //        }
 //    }

    function getPwd() {
        var pwd = $('.new-pwd').val();
        var reg = /^[a-zA-Z0-9]{6,20}$/i.test(pwd);
        if (reg) {
            $('.pwd-msg').html('');
            return true;
        } else {
            $('.pwd-msg').html("密码格式不符合要求").css('color', 'red');
            return false;
        }
    }


 //修改密码
function updatePWd() {
    var code = $('.codeval').val();
    var pwd=$('.new-pwd').val();
    var userNo=$('.update-userNo').val();
    if (!code || code.length!=4) {
        $('.code-msg').html("请输入正确的验证码");
        return;
    }else{
        $.ajax({
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            url: '/wap/checkCode?code='+code+"&type=4",
            success: function (result) {
                if(result.data>0){//999016
                    window.location="/wap/openUserCenter";
                }else {
                    $('.code-msg').html("验证码有误");
                    return;
                }
            }
        })
    }
    if (!getPwd()) return;
    $.ajax({
        type:'post',
        url:'/wap/updatePwd',
        data:{
            pwd:pwd,
            userNo:userNo
        },
        success:function (result) {
            if(result.msg='1'){
                $.toast("密码修改成功", function () {
                    window.location.href='/wap/openLoginPwd';
                });
            }else {
                // $('.pwd-msg').html("密码修改失败！");
                $.toast("密码修改失败", 'cancel');
            }
        }
    })
}
    // 验证码倒计时
    function getCodeTimer () {
        var leftTime = 59;
        $('#code').removeClass('code');
        // clearClick();
        // if (leftTime && leftTime > 0) {
        var codeTimer = setInterval(function () {
            leftTime--;
            // sessionStorage.setItem('timing', leftTime);
            $('#code').text(leftTime+'秒后重新获取').addClass('codeDisabled');
            if (leftTime == 0) {
                clearInterval(codeTimer);
                $('#code').text('重新获取').removeClass('codeDisabled');
                $('#code').addClass('code');
            }
        }, 1000);
        // }
    }
//确定修改密码
    $('.submitSetPwd').on('click',function () {
        updatePWd();
    })

</script>
</html>